<!DOCTYPE html>
<html lang="">
  <head>
      <meta name="baidu-site-verification" content="code-3c7TaFhLZM" />
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>^●ω＜^ニャ♪</title>
  </head>
  <body style="-webkit-backface-visibility: hidden;backface-visibility: hidden;overflow: hidden">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <v-overlay class="y-v-overlay">
    </v-overlay>
    <div id="app"></div>
    <div class="error" style="display:none;width: 100%;height: 100%;text-align: center;position: absolute;top: 50%;">
        <span style="padding: 40px;background: #d5daff;font-size: 16px;">
        </span>
    </div>
    <!-- built files will be auto injected -->
    <div id="aplayer" class="aplayer"  data-id="5151856974" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
    <canvas id="canvas" ></canvas>
  </body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuDuChen/wcf@master/APlayer/APlayer.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/css/github.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/css/github-markdown.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/css/katex.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/js/confetti.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/js/cursor-effects.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/yuDuChen/wcf@master/APlayer/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/yuDuChen/wcf@master/APlayer/Meting.min.js"></script>

  <script>
      const browser = {
          versions: function () {
              var u = navigator.userAgent;
              return {
                  trident: u.indexOf('Trident') > -1, //IE内核
                  presto: u.indexOf('Presto') > -1, //opera内核
                  webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                  gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
                  mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                  ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
                  android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
                  iPhone: u.indexOf('iPhone') > -1, //iPhone
                  iPad: u.indexOf('iPad') > -1, //iPad
                  webApp: u.indexOf('Safari') > -1 //Safari
              };
          }()
      };

      if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
          $('#app').hide()
          $('.y-v-overlay').hide()
          $('.error span').html('请使用浏览器访问')
          $('.error').show()
      }
      if(browser.versions.trident || browser.versions.presto){
          $('#app').hide()
          $('.y-v-overlay').hide()
          $('.error span').html('请使用谷歌/苹果内核浏览器，如360极速、谷歌、Edge、Safari')
          $('.error').show()
      }
      console.log("%c 当前内核为 : "+navigator.userAgent+"", "background: black; padding:5px 0px;color:#fadfa3;font-weight:bold");
  </script>
  <script>
      console.log("%c ころんびょん羽渡尘ちゃん %c http://www.yuduchen.cn/ ", "background: black; padding:5px 0px;color:#fadfa3;font-weight:bold","background: orange; padding:5px 0px;");
      function random(lower, upper) {
          return Math.floor(Math.random() * (upper - lower)) + lower;
      }
      <!--离开页面改变title -->
      var time;
      var normar_title = document.title;
      document.addEventListener('visibilitychange', function () {
          if (document.visibilityState == 'hidden') {
              clearTimeout(time);
              document.title = '(ФωФ) にゃ～ 快回来喵！';
          } else {
              document.title = '^●ω＜^ニャ♪';
              time = setTimeout(function () {
                  document.title = normar_title;
              }, 3000);
          }
      });
      $(document).ready(function () {
          var i = random(1,6)
          let img = "https://www.hualigs.cn/image/60a1e62604fd3.jpg";
          if(i == 1){
              img = "https://www.hualigs.cn/image/60a1e62604fd3.jpg";
          }else if(i == 2){
              img = "https://www.hualigs.cn/image/60a1e3eb87835.jpg";
          }else if(i == 3){
              img = "https://www.hualigs.cn/image/60a1e3eb87d50.jpg";
          }else if(i == 4){
              img = "https://www.hualigs.cn/image/60a1e3eb869d6.jpg";
          }else if(i == 5){
              img = "https://www.hualigs.cn/image/60a1e3eba133f.jpg";
          }else if(i == 6){
              img = "https://www.hualigs.cn/image/60a1e3eba2554.jpg";
          }
          $(".y-v-overlay").css("background-image","url('"+img+"')")

          return ;
          $("<link>").attr({
              href: "https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/live2d/assets/waifu.css",
              rel: "stylesheet",
              type: "text/css"
          }).appendTo('head');
          $('body').append(
              '<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>'
          );
          $.getScript("https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/live2d/assets/waifu-tips.js", function() {
              $.getScript("https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/live2d/assets/live2d.js", function() {
                  console.log("%c ", "background: url() 0% 0% / 100% 100% rgb(248, 248, 255);padding-left:750px;padding-bottom: 400px;");
                  console.log("%c Live2D 看板娘 %c ころんびょん羽渡尘ちゃん", "color:red;font-weight:bold","color:orange;font-weight:bold");
                  /* 可直接修改部分参数 */
                  live2d_settings['hitokotoAPI'] = 'hitokoto.cn'; // 一言 API测试
                  live2d_settings['modelId'] = 3; // 默认模型 ID
                  live2d_settings['modelTexturesId'] = 1; // 默认材质 ID
                  live2d_settings['waifuSize'] = '180x160';       // 看板娘大小，例如 '280x250', '600x535'
                  live2d_settings['waifuTipsSize'] = '135x50';     // 提示框大小，例如 '250x70', '570x150'
                  live2d_settings['waifuFontSize'] = '12px';       // 提示框字体，例如 '12px', '30px'
                  live2d_settings['waifuToolFont'] = '12px';       // 工具栏字体，例如 '14px', '36px'
                  live2d_settings['waifuToolLine'] = '20px';       // 工具栏行高，例如 '20px', '36px'
                  live2d_settings['waifuToolTop'] = '-45px';        // 工具栏顶部边距，例如 '0px', '-60px'
                  live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置，可选 true(真), false(假)
                  live2d_settings['waifuDraggable'] = 'unlimited';
                  live2d_settings['waifuEdgeSide'] = 'right:35';
                  live2d_settings['homePageUrl'] = '';       // 主页地址，可选 'auto'(自动), '{URL 网址}'
                  live2d_settings['aboutPageUrl'] = '/about';   // 关于页地址, '{URL 网址}'
                  /* 在 initModel 前添加 */
                  initModel('https://cdn.jsdelivr.net/gh/yuDuChen/yuduchen@master/live2d/assets/waifu-tips.json');
                  $(".waifu #live2d").css("top","-20px");
                  $(".waifu-tool").css("top","0px");
                  $(".waifu").css("z-index","10");
              });
          });
      })
  </script>
<style>
    .aplayer.aplayer-fixed .aplayer-lrc{
        bottom: 20px !important;
        left: 88px !important;
        right: auto !important;
    }
    @media (max-width: 1099px){
        .aplayer .aplayer-lrc p{
            max-width: 30%;
        }
    }
    @media (min-width: 1100px){
        .aplayer .aplayer-lrc p{
            max-width: 40%;
        }
    }
    @media (min-width: 1200px){
        .aplayer .aplayer-lrc p{
            max-width: 60%;
        }
    }
    @media (min-width: 1500px){
        .aplayer .aplayer-lrc p{
            max-width: 100%;
        }
    }
    .y-v-overlay{
        width: 100%;
        height: 100%;
        background-color:inherit !important;
        background-size:cover;
        background-repeat:no-repeat;
        z-index:19961100;
        position: absolute;
    }
    #canvas {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: 0.2;
    }
    @media (min-width: 960px){
        .about-container {
            max-width: 871px;
        }
    }
    @media (min-width: 1000px) {
        .y-container {
            max-width: 1006px;
        }
        .about-container {
            max-width: 1006px;
        }
    }
    @media (min-width: 1264px) {
        .y-container {
            max-width: 1175px;
        }
        .about-container {
            max-width: 1176px;
        }
    }
    @media (min-width: 1300px) {
        .y-container {
            max-width: 1300px;
        }
        .about-container {
            max-width: 1300px;
        }
    }
    @media (min-width: 1400px) {
        .y-container {
            max-width: 1400px;
        }
        .about-container {
            max-width: 1400px;
        }
    }
    @media (min-width: 1500px) {
        .y-container {
            max-width: 1400px;
        }
        .about-container {
            max-width: 1424px;
        }
    }
    @media (min-width: 1600px) {
        .y-container {
            max-width: 1555px;
        }
        .about-container {
            max-width: 1555px;
        }
    }
    @media (min-width: 1700px) {
        .y-container {
            max-width: 1640px;
        }
        .about-container {
            max-width: 1640px;
        }
    }
    @media (min-width: 1900px) {
        .y-container {
            max-width: 1790px;
        }
        .about-container {
            max-width: 1800px;
        }
    }
    @media (min-width: 2000px) {
        .y-container {
            max-width: 2000px;
        }
        .about-container {
            max-width: 2000px;
        }
    }
    @media (min-width: 2222px) {
        .y-container {
            max-width: 2200px;
        }
        .about-container {
            max-width: 2200px;
        }
    }
</style>
</html>
